import {PlusOutlined} from '@ant-design/icons'
import {
    Row,
    Typography,
    Flex,
    Button,
    Col,
    Form,
    Input,
    Modal,
    Table,
    Switch,
    Divider,
    Radio,
    Select,
    message
} from 'antd'
import React, {useState, useEffect} from 'react'
import {
    accountAddAPI,
    accountDelAPI,
    accountListAPI,
    accountResetAPI
} from '../service/account'
import {sellerVerifyList} from '../service/seller'

function PrivilegeAccount() {
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [form] = Form.useForm()
    const [accountList, setAccountList] = useState([])
    const [pageNo, setPageNo] = useState(1)
    const [pageSize, setPageSize] = useState(10)
    // 保存商家列表
    const [sellerList, setSellerList] = useState([])
    // 保存账号类型
    const [accountType, setAccountType] = useState(0)
    // 用于更新列表啊
    const [n, setN] = useState(0)
    useEffect(() => {
        ;(async () => {
            const res = await accountListAPI({pageSize, pageNo})
            setAccountList(res.data.objects)
            console.log(res)
        })()
        // 查询所有的商家
        ;(async () => {
            const res = await sellerVerifyList({pageSize: 1000, pageNo: 1})
            console.log(res)
            setSellerList(res.data.objects)
        })()
    }, [pageNo, n])
    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={3}>信息管理</Typography.Title>
                        <Button
                            type="primary"
                            icon={<PlusOutlined/>}
                            onClick={() => setIsModalOpen(true)}
                        >
                            新建账号
                        </Button>
                    </Flex>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Form layout="inline" onFinish={async (values) => {
                    }}>
                        <Form.Item label="用户名" name="username">
                            <Input/>
                        </Form.Item>
                        <Form.Item label="手机号" name="phone">
                            <Input/>
                        </Form.Item>
                        <Form.Item label="商家" name="storename">
                            <Input/>
                        </Form.Item>
                        <Form.Item>
                            <Button type="default" htmlType="reset">
                                重置
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Typography.Paragraph style={{fontSize: 16}}>
                        账号列表
                    </Typography.Paragraph>
                </Col>
                <Col span={24}>
                    <Table
                        pagination={{
                            pageSize,
                            onChange: (page) => {
                                setPageNo(page)
                            }
                        }}
                        rowKey={(record) => record.id}
                        columns={[
                            {
                                title: '编号',
                                dataIndex: 'id',
                                key: 'id'
                            },
                            {
                                title: '姓名',
                                dataIndex: 'nickname',
                                key: 'nickname'
                            },
                            {
                                title: '商家',
                                dataIndex: 'businessId',
                                key: 'businessId'
                            },
                            {
                                title: '用户类型',
                                dataIndex: 'accountType',
                                key: 'accountType',
                                render: (_, record) =>
                                    record.accountType === 0 ? <>平台</> : <>商家</>
                            },
                            {
                                title: '手机号',
                                dataIndex: 'accountPhone',
                                key: 'accountPhone'
                            },
                            {
                                title: '电子邮箱',
                                dataIndex: 'email',
                                key: 'email'
                            },
                            {
                                title: '角色',
                                key: 'role',
                                render: (_, record) => '管理员'
                            },
                            {
                                title: '状态',
                                key: 'accountStatus',
                                render: (_, record) => (
                                    <Switch
                                        defaultChecked={record.accountStatus === 0 ? true : false}
                                    />
                                )
                            },
                            {
                                title: '操作',
                                key: 'action',
                                render: (_, record) => {
                                    return (
                                        <span className="op">
                      <a
                          onClick={() => {
                              setIsModalOpen(true)
                              form.setFieldsValue(record)
                          }}
                      >
                        编辑
                      </a>
                      <a
                          onClick={async () => {
                              const res = await accountDelAPI({id: record.id})
                              console.log(res)
                              if (res.code === '0') {
                                  message.success('删除成功')
                                  setN(n + 1)
                              }
                          }}
                      >
                        删除
                      </a>
                      <a>分配角色</a>
                      <a
                          onClick={async () => {
                              const res = await accountResetAPI({id: record.id})
                              console.log(res)
                              if (res.code === '0') {
                                  message.success('密码重置成功')
                              }
                          }}
                      >
                        密码重置
                      </a>
                    </span>
                                    )
                                }
                            }
                        ]}
                        dataSource={accountList}
                    />
                </Col>
            </Row>
            <Modal
                title="新建账号"
                width={800}
                open={isModalOpen}
                onOk={() => {
                    form.submit()
                }}
                onCancel={() => {
                    setIsModalOpen(false)
                }}
                maskClosable={false}
                destroyOnClose
            >
                <Divider/>
                <Form
                    form={form}
                    preserve={false}
                    onFinish={async (values) => {
                        console.log(values)
                        const res = await accountAddAPI(values)
                        console.log(res)
                        if (res.code === '0') {
                            message.success('新建账号成功')
                            setIsModalOpen(false)
                            form.resetFields()
                            setN(n + 1)
                        }
                    }}
                    labelCol={{span: 4}}
                    wrapperCol={{span: 16}}
                >
                    <Form.Item label="账号类型" name="accountType" initialValue={0}>
                        <Radio.Group
                            onChange={(e) => {
                                // 清空表单控件输入的值
                                form.setFieldsValue({
                                    accountPassword: '',
                                    accountPhone: '',
                                    businessId: '',
                                    email: '',
                                    nickname: ''
                                })
                                setAccountType(e.target.value)
                            }}
                        >
                            <Radio value={0}>平台</Radio>
                            <Radio value={1}>商家</Radio>
                        </Radio.Group>
                    </Form.Item>

                    {accountType === 0 && (
                        <>
                            <Form.Item
                                label="手机号码"
                                name="accountPhone"
                                rules={[
                                    {
                                        required: true,
                                        message: '电话号码不能为空'
                                    },
                                    {
                                        pattern: /^1[3-9]\d{9}$/,
                                        message: '请输入正确的手机号码'
                                    }
                                ]}
                            >
                                <Input placeholder="请输入11位手机号"/>
                            </Form.Item>
                            <Form.Item
                                label="登录密码"
                                name="accountPassword"
                                rules={[
                                    {
                                        required: true,
                                        message: '密码不能为空'
                                    },
                                    {
                                        pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,20}$/,
                                        message: '请输入8~20个字符且包含字母、数字至少一种'
                                    }
                                ]}
                            >
                                <Input.Password placeholder="请输入8~20个字符且包含字母、数字至少一种"/>
                            </Form.Item>
                            <Form.Item
                                label="用户名称"
                                name="nickname"
                                rules={[
                                    {
                                        required: true,
                                        message: '用户名称不能为空'
                                    },
                                    {
                                        pattern: /^.{1,15}$/,
                                        message: '请输入15个字符以内的用户名'
                                    }
                                ]}
                            >
                                <Input placeholder="请输入15个字符以内的用户名"/>
                            </Form.Item>
                            <Form.Item
                                label="电子邮箱"
                                name="email"
                                rules={[
                                    {
                                        required: true,
                                        message: '电子邮箱不能为空'
                                    },
                                    {
                                        pattern:
                                            /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                                        message: '请输入正确的电子邮箱'
                                    }
                                ]}
                            >
                                <Input placeholder="请输入电子邮箱"/>
                            </Form.Item>
                            <Form.Item label="状态状态" name="accountStatus" initialValue={0}>
                                <Radio.Group>
                                    <Radio value={0}>启用</Radio>
                                    <Radio value={1}>关闭</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </>
                    )}
                    {accountType === 1 && (
                        <>
                            <Form.Item
                                label="归属商家"
                                name="businessId"
                                rules={[
                                    {
                                        required: true,
                                        message: '商家名称不能为空'
                                    }
                                ]}
                            >
                                <Select
                                    placeholder="请选择商家名称"
                                    options={sellerList}
                                    fieldNames={{value: 'id', label: 'businessName'}}
                                />
                            </Form.Item>
                            <Form.Item
                                label="手机号码"
                                name="accountPhone"
                                rules={[
                                    {
                                        required: true,
                                        message: '电话号码不能为空'
                                    },
                                    {
                                        pattern: /^1[3-9]\d{9}$/,
                                        message: '请输入正确的手机号码'
                                    }
                                ]}
                            >
                                <Input placeholder="请输入11位手机号"/>
                            </Form.Item>
                            <Form.Item
                                label="登录密码"
                                name="accountPassword"
                                rules={[
                                    {
                                        required: true,
                                        message: '密码不能为空'
                                    },
                                    {
                                        pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,20}$/,
                                        message: '请输入8~20个字符且包含字母、数字至少一种'
                                    }
                                ]}
                            >
                                <Input.Password placeholder="请输入8~20个字符且包含字母、数字至少一种"/>
                            </Form.Item>
                            <Form.Item
                                label="用户名称"
                                name="nickname"
                                rules={[
                                    {
                                        required: true,
                                        message: '用户名称不能为空'
                                    },
                                    {
                                        pattern: /^.{1,15}$/,
                                        message: '请输入15个字符以内的用户名'
                                    }
                                ]}
                            >
                                <Input placeholder="请输入15个字符以内的用户名"/>
                            </Form.Item>
                            <Form.Item
                                label="电子邮箱"
                                name="email"
                                rules={[
                                    {
                                        required: true,
                                        message: '电子邮箱不能为空'
                                    },
                                    {
                                        pattern:
                                            /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                                        message: '请输入正确的电子邮箱'
                                    }
                                ]}
                            >
                                <Input placeholder="请输入电子邮箱"/>
                            </Form.Item>
                            <Form.Item label="状态状态" name="accountStatus" initialValue={0}>
                                <Radio.Group>
                                    <Radio value={0}>启用</Radio>
                                    <Radio value={1}>关闭</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </>
                    )}
                </Form>
            </Modal>
        </>
    )
}

export default PrivilegeAccount
